/*
*02-创建食物对象
* 食物的特征:
* 1. 宽高  颜色  坐标  xy   left  top
* 2. 行为  重新随机生成一个位置  render  create
*/

// 封装在沙箱,避免造成变量污染,形成独立的空间; 内部的属性或方法可绑定在window对象供外部调用
;(function(win){//0,获取使用的对象, 由形参win接收
    // 获取window对象中的document文档对象
    var document = win.document;
    var map = document.querySelector(".map"); // 获取地图盒子
    //1.创建一个食物盒子的构造函数
    function Food(params){ // 外部传入的数据由params对象接收
        // params = {width:80,height:80,color:pink,x:120,y:120};
        params = params || {};//短路运算判断对象中是否有传入数据,无参数则给默认值{}
        this.width = params.width || 40;
        this.height = params.height || 40;
        this.color = params.color || "orangered";
        this.x = params.x || 0;
        this.y = params.y || 0;

        //3.在构造函数内调用create方法来创建小方块食物,外部一new即可创建对象
        this.create(document,map);

        //6.在构造函数中调用render方法,外部new的时候重新渲染
        this.render(map);
    }

//2.给食物的构造函数添加一个创建的方法  用来生成食物div
    Food.prototype.create = function(document,map){
        var divFood = document.createElement("div"); // 动态创建div元素
        divFood.style.width = this.width +"px";
        divFood.style.height = this.height +"px";
        divFood.style.backgroundColor = this.color;
        divFood.style.left = this.x + "px";
        divFood.style.top = this.y + "px";
        map.appendChild(divFood); // 追加创建的元素到map盒子上

        this.element = divFood; // 将创建的divFood存到当前对象的element属性中,所有原型对象即可调用此方法
    };

    //5.给Food的原型对象添加一个render方法,让食物随机位置和颜色
    Food.prototype.render = function(){
        // var r = utils.getRandom(0,255);
        // var g = utils.getRandom(0,225);
        // var b = utils.getRandom(0,255);
        //5.1 设置Food盒子随机背景颜色
        this.element.style.backgroundColor = "rgb("+utils.getRandom(0,255)+","+utils.getRandom(0,225)+","+utils.getRandom(0,255)+")";
        //5.3 保存当前食物坐标位置
        this.x = utils.getRandom(0,(map.clientWidth/this.width)-1)*this.width;
        this.y =  utils.getRandom(0,(map.clientHeight/this.height)-1)*this.height;
        //5.2 设置Food盒子随机坐标位置
        this.element.style.left = this.x + 'px'; // 获取水平位置
        this.element.style.top = this.y + 'px'; // 获取垂直位置

    };

    //6. 添加删除食物的方法
    Food.prototype.removeFood = function(){
        // 删除当前食物
      // this.element.parentNode.removeChild(this.element); //让map删除divFood
        this.element.remove();
    };

    //4.把食物的对象挂到window对象,不然外部无法new获取此对象
    win.Food = Food;
})(window); // 把window对象传入
